<template>
  <div>
    <el-row type="flex" justify="space-between">
      <el-col>
        <el-button type="primary" @click="clickCreat">添加公司</el-button>
      </el-col>
      <el-col>
        <div style="display: flex; justify-content: flex-end">
          <el-input
            @clear="clear"
            clearable
            v-model="form.search"
            style="width: 300px; margin-left: 15px"
            placeholder="搜索公司"
            class="input-with-select"
          >
            <el-button
              @click="searchVal"
              slot="append"
              style="background-color: #45a321; color: #fff; border-radius: 0;border:1px solid #45a321;"
              >搜索</el-button
            >
            <i slot="prefix-icon" class="el-icon-search"></i>
          </el-input>
        </div>
      </el-col>
    </el-row>
    <el-table
      align="center"
      :data="list.list"
      border
      style="width: 100%; margin: 20px 0"
    >
      <el-table-column align="center" label="封面图">
        <template slot-scope="scope">
          <div style="position: relative; width: 100%; padding-top: 56%">
            <img
              :src="scope.row.tpic"
              alt=""
              style="
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0px;
                top: 0px;
              "
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="公司名称">
      </el-table-column>
      <el-table-column align="center" prop="myorder" label="排序">
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            class="editText"
            @click="clickEdit(scope.row.id)"
            type="text"
            >修改</el-button
          >
          <el-button
            class="deletText"
            @click="deletUser(scope.row.id)"
            type="text"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="list.page"
        :page-size="list.size"
        layout="total, prev, pager, next, jumper"
        :total="parseInt(list.count)"
        align="left"
      ></el-pagination>
    </div>
    <el-dialog
      title="公司管理"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="handleClose"
    >
      <div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">封面图</p>
          <div class="left_w s_flex s_align_items">
            <div style="margin-right:20px">
              <el-upload
                class="upload-demo"
                :on-success="onSuccess"
                :show-file-list="false"
                :action="`${VUE_APP_BASE_API}/v1/index/upload `"
              >
                <!-- -->
                <el-button type="primary">上传封面图</el-button>
              </el-upload>
            </div>
              <el-button v-if="form.tpic" @click="form.tpic = ''" type="danger"
            >删除</el-button
          >
          </div>
        </div>
        <div class="news_mrt" v-if="form.tpic">
          <img style="width: 100%" :src="form.tpic" />
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">公司名称</p>
          <div class="left_w">
             <el-input v-model="form.name" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">公司网址</p>
          <div class="left_w">
            <el-input v-model="form.href" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">排序</p>
          <div class="left_w">
            <el-input
              v-model="form.myorder"
              placeholder="请输入内容"
            ></el-input>
          </div>
        </div>

              <div class="s_flex s_align_items news_mrt">
          <p style="width: 15%">公司简介</p>
          <div class="left_w">
             <el-input type="textarea" v-model="form.desc" placeholder="请输入内容"></el-input>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { VUE_APP_BASE_API } from "@/config.js";
import {
  WebCompanyList,
  WebCompanyAdd,
  WebCompanyEdit,
  WebCompanyDel,
  WebCompanyInfo,
} from "@/api/admin";
import Editor from "@/components/Editor";
export default {
  data() {
    return {
      VUE_APP_BASE_API,
      list: [],
      dialogVisible: false,
      form: {
        company_id: "",
        name: "",
        tpic: "",
        search: "",
        myorder: "",
        desc:""
      },
      contentDesc: "",
      clearDesc: 0,
      fileList: [],
    };
  },
  components: {
    // Editor,
  },
  mounted() {
    this.getLIst();
  },
  methods: {
    searchVal() {
      this.getLIst();
    },
    clickCreat() {
      this.dialogVisible = true;
    },
    handeChange(val){
        this.form.type =  val
    },
    async clickEdit(id) {
      try {
        this.form = await WebCompanyInfo({
          company_id: id,
        });
        this.contentDesc = this.form.content;
        this.dialogVisible = true;
        // this.form.type = this.form.from.toString();

      } catch (error) {
        this.$message.error(error.message);
      }
    },
    deletUser(id) {
      this.$confirm("此操作将删除该新闻, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await WebCompanyDel({
              company_id: id,
            });
            this.getLIst();
            this.$message({
              type: "success",
              message: "删除成功",
            });
          } catch (error) {
            this.$message.error(error.message);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    clear() {
      this.getLIst();
    },
    handleClose() {
      this.dialogVisible = false;
      this.form = {
        title: "",
        type: "",
        tpic: "",
        search: "",
        myorder: "",
      };
    },
    async onSuccess(response, file, fileList) {
      if (response) {
        this.form.tpic = response.data.url;
        this.$nextTick(() => {
          this.form.tpic = response.data.url;
        });
        this.$message.success("上传成功");
      }
    },
    async getLIst() {
      try {
        this.list = await WebCompanyList({
          keyword: this.form.search,
        });
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    async save() {
      try {
        if (this.form.id) {
          await WebCompanyEdit({
            company_id: this.form.id,
            tpic: this.form.tpic,
            href: this.form.href,
            name: this.form.name,
            desc: this.form.desc,
            myorder: this.form.myorder,
          });
          this.getLIst();
          this.$message.success("添加成功");
          this.dialogVisible = false;

          this.form = {
            title: "",
            type: "",
            tpic: "",
            search: "",
            myorder: "",
          };
        } else {
          await WebCompanyAdd({
              tpic: this.form.tpic,
            href: this.form.href,
            name: this.form.name,
            desc: this.form.desc,
            myorder: this.form.myorder,
          });

          this.getLIst();
          this.$message.success("添加成功");
          this.dialogVisible = false;
          this.form = {
            title: "",
            type: "",
            tpic: "",
            search: "",
            myorder: "",
          };
        }
      } catch (error) {
        this.$message.error(error.message);
      }
    },
    cancle() {
      this.dialogVisible = false;

      this.form = {
        title: "",
        online_time: "",
        content: "",
        tpic: "",
        myorder: "",
      };
    },
    //每页下拉显示数据
    async handleSizeChange(size) {
      try {
        const resUser = await WebCompanyList({
          keywords: this.form.search,
          page: size,
        });
      } catch (e) {
        this.$message.error(e.message);
      }
    },
    //点击第几页
    async handleCurrentChange(currentPage) {
      try {
        const resUser = await WebCompanyList({
          keywords: this.form.search,
          page: currentPage,
        });
      } catch (e) {
        this.$message.error(e.message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.news_mrt {
  margin-bottom: 30px;
}
.left_w {
  width: 80%;
}
</style>